<div class="body-wrapper">

<button id="sidebar-menu" class="sidebar-button sidebar-toggle" aria-label="toggle sidebar" aria-controls="sidebar">
  <i class="ri-menu-line ri-lg" title="Collapse/expand sidebar"></i>
</button>

<nav id="sidebar" class="sidebar">
  <% url = config.homepage_url || "#{config.main}.html" %>
  <div class="sidebar-header">
    <div class="sidebar-projectInfo">
      <%= if config.logo do %>
        <a href="<%= url %>" class="sidebar-projectImage">
          <img src="<%= logo_path(config) %>" alt="<%= config.project %>" />
        </a>
      <% end %>
      <div>
        <a href="<%= url %>" class="sidebar-projectName" translate="no">
          <%= config.project %>
        </a>
        <div class="sidebar-projectVersion" translate="no">
          v<%= config.version %>
        </div>
      </div>
    </div>
    <ul id="sidebar-listNav" class="sidebar-listNav" role="tablist">
      <li>
        <button id="extras-list-tab-button" role="tab" data-type="extras" aria-controls="extras-tab-panel" aria-selected="true" tabindex="0">
          <%= config.extra_section || "Pages" %>
        </button>
      </li>

      <%= if nodes_map.modules != [] do %>
        <li>
          <button id="modules-list-tab-button" role="tab" data-type="modules" aria-controls="modules-tab-panel" aria-selected="false" tabindex="-1">
            Modules
          </button>
        </li>
      <% end %>

      <%= if nodes_map.tasks != [] do %>
        <li>
          <button id="tasks-list-tab-button" role="tab" data-type="tasks" aria-controls="tasks-tab-panel" aria-selected="false" tabindex="-1">
            <span translate="no">Mix</span> Tasks
          </button>
        </li>
      <% end %>
    </ul>
  </div>

  <div id="extras-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="extras-list-tab-button">
    <ul id="extras-full-list" class="full-list"></ul>
  </div>

  <%= if nodes_map.modules != [] do %>
    <div id="modules-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>
      <ul id="modules-full-list" class="full-list"></ul>
    </div>
  <% end %>

  <%= if nodes_map.tasks != [] do %>
    <div id="tasks-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="tasks-list-tab-button" hidden>
      <ul id="tasks-full-list" class="full-list"></ul>
    </div>
  <% end %>
</nav>

<main class="content">
  <output role="status" id="toast"></output>

  <div id="content" class="content-inner">
    <div class="top-search">
      <div class="search-settings">
        <form class="search-bar" action="search.html">
          <label class="search-label">
            <span class="sr-only">Search documentation of <%= config.project %></span>
            <input name="q" type="text" class="search-input" placeholder="Press / to search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
          </label>
          <button type="submit" class="search-button" aria-label="Submit Search">
            <i class="ri-search-2-line ri-lg" aria-hidden="true" title="Submit search"></i>
          </button>
          <button type="button" tabindex="-1" class="search-close-button" aria-hidden="true">
            <i class="ri-close-line ri-lg" title="Cancel search"></i>
          </button>
        </form>
        <div class="autocomplete">
        </div>
        <button class="icon-settings display-settings">
          <i class="ri-settings-3-line"></i>
          <span class="sr-only">Settings</span>
        </button>
      </div>
    </div>
